<template>

    <div>
        <el-row class="app-toptool" type="flex">
      <el-col :span="16">
        <Search
          size="mini"
          :search-visible="searchVisible"
          :search-data.sync="searchData"
          :search-form="searchForm"
          @refesh_list="searchgo"
        />
      </el-col>
      <el-col :span="8">
        <div class="btn-group" style="margin-bottom:11px;float: right;">
          <div>
            <el-button
              v-if="checkPermission('/carmine/create')"
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="add()"
            >添加</el-button>

          </div>
        </div>
      </el-col>
    </el-row>

      <div>
        <el-table
          :data="list"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="ID"
            width="70">
          </el-table-column>

          <el-table-column
            prop="title"
            label="批次"
            width="180">
          </el-table-column>

          <el-table-column
            prop="term_time"
            label="截止时间"
            width="180">
          </el-table-column>

          <el-table-column
            prop="number"
            label="发放数量">
          </el-table-column>

          <el-table-column
            prop="type"
            label="类型">
          </el-table-column>

          <el-table-column
            prop="quota"
            label="额度">
          </el-table-column>

          <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button v-if="checkPermission('/carmine/list_data')" type="text" size="small" @click="dialogTableVisibleOn(scope.row)" >查看明细</el-button>
            <el-button v-if="checkPermission('/carmine/delete')" type="text" size="small" @click="deleteHandleClick(scope.row)" >删除</el-button>
          </template>
        </el-table-column>

    </el-table>
      </div>        

      <!--添加/修改-->
      <Update :info="updateInfo" :opentype="opentype" :show.sync="dialog.updateDialogStatus" size="mini" @refesh_list="index" />

      <el-dialog title="明细" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="id" label="ID" width="70"></el-table-column>
        <el-table-column property="sn" label="卡号" width="350"></el-table-column>
        <el-table-column property="password" label="卡密" width="200"></el-table-column>
        <el-table-column property="state" label="状态"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="pager"
        @current-change="handleCurrentChange"
        :total="tablePaginationTotal">
      </el-pagination>
    </el-dialog>


    </div>

</template>

<script scoped>
import Search from '@/components/common/Search'
import Pagination from '@/components/Pagination'
import Update from '@/views/carmine/update.vue'
import { confirm, param2Obj } from '@/utils/common'

export default {
    name: 'Ad',
  components: {
    Search,
    Pagination,
    Update
  },
    data() {
      return {
          tableData: [],
          searchVisible: true,
          searchData: {},
          searchForm: [],
          multiple: true,
          updateInfo: {},
          opentype: 'add',
          dialog: {
              updateDialogStatus: false
          },
          page_data: {
            limit: 20,
            page: 1,
            total: 20
          },
          list: [],
          dialogTableVisible: false,
          gridData: [],
          tablePaginationTotal:0,
          row_id: 0,
      }
    },
    mounted() {
      this.index()
    },
    methods: {
      handleCurrentChange(val){
        console.log(val)
        let param2 = {
          cid : this.row_id,
          limit: 10,
          page: val
        }
        this.$api.post('/carmine/data', param2).then(res => {
          this.gridData = res.data.item
          this.tablePaginationTotal = res.data.count
        })

      },
      dialogTableVisibleOn(row){
        this.dialogTableVisible = true
        this.row_id = row.id
        let param2 = {
          cid : this.row_id,
          limit: 10,
          page: 1
        }
        // console.log(param2)
        this.$api.post('/carmine/data', param2).then(res => {
          this.gridData = res.data.item
          this.tablePaginationTotal = res.data.count
        })

      },
      searchgo() {
        this.page_data.page = 1;
        this.index()
      },
    index() {
      const param = {
        limit: this.page_data.limit,
        page: this.page_data.page
      }
      Object.assign(param, this.searchData)
      Object.assign(param, param2Obj(this.$route.fullPath))
      this.loading = true

      this.$api.post('/carmine/index', param).then(res => {
        this.list = res.data.item
        this.page_data.total = res.data.count
        this.loading = false
        // console.log(this.page_data);
        if (this.page_data.page == 1) {
          this.searchForm = [
            {
              type: 'Input',
              label: '关键词',
              prop: 'keyword',
              width: '230px'
            }
          ]
        }
      })
    },
    add(){
        this.opentype = 'add'
        this.dialog.updateDialogStatus = true
    },
    handleClick(){

    },
    deleteHandleClick(obj){
      this.$api.post('/carmine/delete', {id: obj.id}).then(res => {
        if(res.code == 2000){
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.page_data.page = 1;
          this.index()
        }else{
          this.$message({
            message: res.msg,
            type: 'success'
          })
        }

      })      
    }
}
}
</script>

<style lang="scss" scoped>

</style>